<template>
  <div class="moment-detail" v-if="moment" @click="hideComment">
    <div style="height: 35px;line-height: 35px;font-size: 15px;background-color: rgba(237,237,237,1);color: #9e9e9e;">
      <el-row style="font-size: 16px;">
        <el-col :span="6">
          <i @click="navigate('/home/moment/main')" class="el-icon-arrow-left" style="margin-left: 10px;font-size: 18px;cursor:pointer;color: #898989"></i>
        </el-col>
        <el-col :span="12" align="center">
          <div style="font-size: 12px;">朋友圈</div>
        </el-col>
      </el-row>
    </div>
    <el-row style="padding: 40px 40px 0 40px;">
      <!--头像开始-->
      <el-col :span="2">
        <img style="width: 35px;cursor:pointer" :src="moment.avatar">
      </el-col>
      <!--头像结束-->
      <el-col :span="22" style="border-bottom: 1px solid #f3f3f3">
        <p style="margin: 0 0 0 8px;color: #7686cc;cursor:pointer">{{moment.comment}}</p>
        <p style="margin-left: 8px" class="comment-content" v-html="moment.textContent"></p>
        <picture-wall :imgUrlArr="moment.mediaUrls" v-if="moment.type === 0"></picture-wall>
        <!--照片墙结束-->
        <!--视频开始-->
        <video v-if="moment.type === 1" style="width: 300px;" autoplay :src="moment.mediaUrls[0]" controls></video>
        <!--视频结束-->
        <el-row>
          <el-col :span="6">
            <span style="color: #9e9e9e;font-size: 13px;">6月7日 16:33</span>
          </el-col>
          <el-col :span="16" align="right">
            <div @click.stop :style="{'opacity': commentOpacity}" style="display: inline-block;color: white;line-height: 35px;text-align: center;
                      border-radius: 10px;overflow: hidden;cursor: pointer;background-color: #4c4c4c">
              <div style="display: inline-block;width: 100px;height: 35px;border-right: 1px solid #454545;background-color: #4c4c4c;" @click="thumbup">
                <span class="iconfont icon-thumbup" style="font-size:18px;vertical-align: bottom;margin-right: 5px"></span><span v-text="isThumbup ? '取消' : '赞'"></span>
              </div>
              <div style="display: inline-block;width: 100px;height: 35px;background-color: #4c4c4c" @click="showTextarea()">
                <span class="iconfont icon-comment" style="font-size:18px;margin-right: 5px"></span><span>评论</span>
              </div>
            </div>
          </el-col>
          <el-col :span="2" align="right">
            <span class="el-icon-more" title="评论" style="background-color: #f7f7f7;padding: 0 5px;border-radius: 5px;cursor: pointer" @click="setCommentOpacity" @click.stop></span>
          </el-col>
        </el-row>
        <!--评论点赞开始-->
        <div style="background-color: #f7f7f7;margin-bottom: 15px;padding-bottom: 10px">
          <!--点赞列表开始-->
          <div style="display: flex;align-items: center;color: #7686cc;font-size: 15px;padding: 10px;border-bottom: 1px solid #ebebeb">
            <span class="iconfont icon-thumbup" style="font-size: 18px;color: #7686cc;"></span>
            <img v-for="(thumbup,i) in thumbupArr" :key="i" :src="thumbup.avatar" :title="thumbup.comment" style="width: 30px;margin-left: 6px;border-radius: 3px;">
          </div>
          <!--点赞列表结束-->
          <!--评论列表开始-->
          <el-row style="margin-top: 15px" v-for="(comment,i) in commentArr" :key="i">
            <el-col :span="4" style="text-align: center">
              <!--只显示第一条评论的icon-->
              <span :style="{'opacity': i === 0 ? 1 : 0}" class="iconfont icon-comment" style="font-size: 18px;color: #7686cc"></span><img :src="comment.avatar" style="width: 30px;margin-left: 6px;border-radius: 3px;vertical-align: middle">
            </el-col>
            <!--最后的评论没有下边框-->
            <el-col :span="19" style="font-size: 15px;" :style="{'border-bottom': i !== (commentArr.length - 1) ? '1px solid #ebebeb' : 'none'}">
              <el-row>
                <el-col :span="12" style="color: #7686cc">{{comment.comment}}</el-col>
                <el-col :span="12" align="right" style="color: #9e9e9e;font-size: 13px;">{{dateFormat(comment.gmtCreate)}}</el-col>
              </el-row>
              <el-row>
                <p style="margin: 5px 0" class="comment-content" v-html="comment.content"></p>
              </el-row>
            </el-col>
          </el-row>
          <!--评论列表结束-->
          <!--评论输入框开始-->
          <div v-if="textareaVisible" @click.stop style="margin: 10px;">
            <comment-input @getValue="comment"></comment-input>
          </div>
          <!--评论输入框结束-->
        </div>
        <!--评论点赞结束-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import PictureWall from './PictureWall'
import CommentInput from './CommentInput'
export default {
  name: 'MomentItem',
  data () {
    return {
      moment: null,
      commentOpacity: 0,
      content: '',
      emojiVisible: false,
      textareaVisible: false,
      thumbupArr: [],
      commentArr: [],
      avatar: this.$store.state.currentUser.avatarThumb
    }
  },
  components: {
    PictureWall,
    CommentInput
  },
  mounted () {
    let id = this.$route.params.id
    this.loadMomentDetail(id)
    this.loadThumbupList(id)
    this.loadCommentList(id)
  },
  methods: {
    setCommentOpacity () {
      this.commentOpacity = this.commentOpacity === 0 ? 1 : 0
    },
    hideComment () {
      this.commentOpacity = 0
      this.textareaVisible = false
    },
    showTextarea () {
      this.setCommentOpacity()
      this.textareaVisible = true
    },
    hideTextarea () {
      this.textareaVisible = false
    },
    navigate (path) {
      this.$router.push(path)
    },
    dateFormat (time) {
      let past = new Date(time)
      let pastDate = past.getDate()
      let pastMonth = past.getMonth()
      let pastYear = past.getFullYear()
      let pastHours = past.getHours()
      let pastMinutes = past.getMinutes()

      let now = new Date()
      let nowDate = now.getDate()
      let nowMonth = now.getMonth()
      let nowYear = now.getFullYear()
      let nowHours = now.getHours()
      let nowMinutes = now.getMinutes()

      let hours = past.getHours()
      let minutes = past.getMinutes() < 10 ? '0' + past.getMinutes() : past.getMinutes()

      if (pastYear === nowYear && pastMonth === nowMonth && nowDate === pastDate) {
        let remainder = nowHours - pastHours
        if (remainder === 0) {
          if (nowMinutes - pastMinutes === 0) {
            return '刚刚'
          } else {
            console.log('进来el1')
            return nowMinutes - pastMinutes + '分钟前'
          }
        } else if (remainder === 1) {
          if (nowMinutes >= pastMinutes) {
            return remainder + '小时前'
          } else {
            return 60 + nowMinutes - pastMinutes + '分钟前'
          }
        } else if (remainder > 1) {
          return remainder + '小时前'
        }
      } else if (pastYear === nowYear && pastMonth === nowMonth && (nowDate - pastDate) === 1) {
        return '昨天 '
      } else if (pastYear === nowYear && pastMonth === nowMonth &&
          (nowDate - pastDate) > 1 && (nowDate - pastDate) <= 7) {
        return nowDate - pastDate + '天前'
      } else if (pastYear === nowYear) {
        let month = pastMonth + 1
        return month + '月' + pastDate + '日' + ' ' + hours + ':' + minutes
      } else {
        let month = pastMonth + 1
        return pastYear + '年' + month + '月' + pastDate + '日' + ' ' + hours + ':' + minutes
      }
    },
    loadMomentDetail (id) {
      this.axios.get(`/api/v1/moment/detail?id=${id}`).then((response) => {
        if (response.data.code === 1) {
          this.moment = response.data.data
        } else {
          this.$message.error('加载点赞列表失败')
        }
      })
    },
    loadThumbupList (id) {
      this.axios.get(`/api/v1/thumbup/list_detail?momentId=${id}`).then((response) => {
        if (response.data.code === 1) {
          this.thumbupArr = response.data.data
        } else {
          this.$message.error('加载点赞列表失败')
        }
      })
    },
    loadCommentList (id) {
      this.axios.get(`/api/v1/comment/list?momentId=${id}`).then((response) => {
        if (response.data.code === 1) {
          this.commentArr = response.data.data
        } else {
          this.$message.error('加载评论列表失败')
        }
      })
    },
    // 点赞，取消点赞
    thumbup () {
      console.log('thumbup 1')
      let formData = new FormData()
      let ownerId = this.moment.userId
      formData.append('momentId', this.moment.id)
      formData.append('ownerId', ownerId)

      if (this.isThumbup()) { // 取消赞
        this.axios.post('/api/v1/thumbup/cancel', formData).then((response) => {
          if (response.data.code === 1) {
            let i = 0
            for (; i < this.thumbupArr.length; i++) {
              if (this.thumbupArr[i].avatar === this.avatar) {
                break
              }
            }
            this.thumbupArr.splice(i, 1)
          }
        }).catch((error) => {
          this.$message.error(error)
        })
      } else { // 点赞
        console.log('thumbup 2')
        this.axios.post('/api/v1/thumbup/up', formData).then((response) => {
          if (response.data.code === 1) {
            // 向点赞列表添加用户名
            console.log('thumbup 3')
            let avatar = this.avatar
            let nickname = this.$store.state.currentUser.nickname
            let thumbup = {avatar, comment: nickname}
            this.thumbupArr.push(thumbup)
          } else {
            this.$message.error(response.data.message)
          }
        }).catch((error) => {
          this.$message.error(error)
        })
      }

      this.setCommentOpacity()
    },
    isThumbup () {
      for (let i = 0; i < this.thumbupArr.length; i++) {
        if (this.thumbupArr[i].avatar === this.avatar) {
          return true
        }
      }
      return false
    },
    comment (value) {
      let content = this.getContent(value)
      let avatar = this.avatar
      let ownerId = this.moment.userId

      let formData = new FormData()
      formData.append('momentId', this.moment.id)
      formData.append('content', content)
      formData.append('ownerId', ownerId)
      this.axios.post('/api/v1/comment/publish', formData).then((response) => {
        if (response.data.code === 1) {
          // 向评论列表添加用户名和评论内容
          let nickname = this.$store.state.currentUser.nickname
          this.commentArr.push({avatar, content, gmtCreate: new Date(), comment: nickname})
        } else {
          this.$message.error(response.data.message)
        }
      }).catch((error) => {
        this.$message.error(error)
      })
    },
    // 使用正则表达式和match()方法提取<p>标签的内容
    getContent (str) {
      let regex = /<p>(.*?)<\/p>/ // 匹配<p>标签及其内容
      let match = str.match(regex) // 执行匹配操作

      return match[1]
    }
  }
}
</script>
<style scoped>
.moment-detail {
  position: fixed;
  top: 0;
  left: 50%;
  bottom: 0;
  width: 550px;
  transform: translateX(-50%);
  overflow: auto;
  border-left: 1px solid #b8b7b7;
  border-right: 1px solid #b8b7b7;
}
.moment-detail::-webkit-scrollbar{
  display: none;
}
.comment-content img {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
</style>
